<template>
	<view class="trends">
		<view class="load" v-if="!load">
			<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
		</view>
		<block v-else>
			<!-- #ifdef MP-WEIXIN -->
			<x-scroll @onRefresh="onRefresh" :isNav="false" refresh="true" @scrolltolower="scrolltolower" offset="0">
			<!-- #endif -->
				<view class="week_share" v-if="Array.isArray(action_list) &&action_list.length>0"
					@click="nav_to(`/pages/dynamic/subject?id=${action_list[0].ID}`)">
					<text>{{action_list[0].Title}}</text>
					<view class="title_right"><uni-icons type="forward" size="24" color="#ff557f"></uni-icons>
					</view>
				</view>

				<view class="list" v-if="Array.isArray(list) && list.length > 0">
					<view class="item" v-for="(item,index) in list" :key="index">
						<view class="item_hd wap" @click="nav_to(`/pages/user/user_visitor?id=${item.UserID}`)">
							<view class="left">
								<view class="cover">
									<image :src="item.HeadImgUrl" mode="" />
								</view>
								<view class="item_namebox">
									<view style="flex:1;display: flex;align-items: center;margin-bottom: 6rpx;">
									<view class="item_name">{{item.Name?$util.entitiesToUtf16(item.Name):''}}</view>
									<view class="f3 c3">{{item.CreateTime?getTime(item.CreateTime):''}}</view>
									</view>
									<view class="f3 c3">{{ getYearStr(item.Birthday) }}后</view>
								</view>
							</view>
							
						</view>
						<view class="wap" v-if="item.PagePath!=''" @click="nav_to(`${item.PagePath}`)">
							<view class="">
								{{$util.entitiesToUtf16(item.Content)}}
							</view>
						</view>
						<view class="wap" v-else>
							{{$util.entitiesToUtf16(item.Content)}}
						</view>
						<view class="item_bd wap">
							<view class="mt20" @click.stop="''" v-if="item.IsVideo === 0 ">
								<image @click.stop="lookimg(item.Images)" class="simg" :src="JSON.parse(item.Images)[0]"
									mode="aspectFill" v-if="JSON.parse(item.Images).length == 1" />
								<u-album v-else :urls="JSON.parse(item.Images)" singleSize="750rpx"
									multipleSize="221rpx"></u-album>
							</view>
							<view class=" video_box" v-else @click.stop="">
								<video :src="JSON.parse(item.Images)[0]"
									:poster="JSON.parse(item.Images)[0]+'?x-oss-process=video/snapshot,t_1,m_fast,ar_auto'"></video>
							</view>
						</view>
						<view class="zan" v-if="item.CommunityZAN.length>0">
							<view class="zanlist" v-for="zan in item.CommunityZAN"
								@click="nav_to(`/pages/user/user_visitor?id=${zan.UserID}`)">
								<view class="img">
									<image :src="zan.HeadImgUrl" mode="aspectFill"></image>
								</view>
								<!-- <view class="name">
									{{zan.Name}}
								</view> -->
							</view>
						</view>
						<view class="delete wap">
							<view class="delBtn">
								<uni-icons type="heart" size="24" color="#9b9b9b"></uni-icons>
								<text style="margin-right: 20rpx;">{{item.zanSum}}</text>
								<!-- <uni-icons type="gift" size="24" color="#9b9b9b"></uni-icons> -->
								<text style="margin-right: 20rpx;">{{item.TotalGiftNum}}</text>
							</view>
							<view class="delBtn" >
								<uni-icons type="trash" size="25" color="#9b9b9b" @click="del(item.ID)"></uni-icons>
								<!-- #ifdef MP-WEIXIN -->
								<button hover-class="none" open-type="share" :data-id="item.ID">
									<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711001185805751.png">
									</image>
								</button>
								<!-- #endif -->
								<!-- #ifdef APP-PLUS -->
								<button hover-class="none" @click="app_share(item)">
									<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711001185805751.png">
									</image>
								</button>
								<!-- #endif -->
							</view>
							
						</view>
					</view>
					<view style="height: 130rpx;"></view>
				</view>
				<block v-else>
					<u-empty mode="list" width="64" height="64"
						icon="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17124806786111367.png" :show="true"
						iconSize="32" text="暂无动态"></u-empty>
				</block>
			<!-- #ifdef MP-WEIXIN -->
			</x-scroll>
			<!-- #endif -->
		</block>
		<view class="add_btn" @click="nav_to('/pages/dynamic/dynamic_add')">发布</view>

		<!-- APP 分享 转发好友、朋友圈 -->
		<!-- #ifdef APP-PLUS -->
		<uni-popup ref="share" type="bottom">
			<view class="x-share">
				<view class="item" @click="shareWX()">
					<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/wx_logo.png"></image>
					<span>转发好友</span>
				</view>
				<view class="item" @click="sharePYQ()">
					<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/pyq_logo.png"></image>
					<span>分享朋友圈</span>
				</view>
			</view>
		</uni-popup>
		<!-- #endif -->
	</view>
</template>

<script>

	export default {
		components: {
			
		},
		data() {
			return {
				user: {},
				load: false,
				oldList: [],
				list: [

				],
				shareTitle: "动魅", //转发的标题
				sharePath: "", //转发的页面
				shareImg: "",

				PageIndex: 1,
				PageSize: 10,
				CompanyID: 6002,
				isMore: true,
				ID: null,
				cz_price: 100,
				zan_id: 0,

				action_list: '',

				sel_community: []
			};
		},
		methods: {
			app_share(item) {
				this.sel_community = item
				this.$refs.share.open()
			},
			async getAction() {
				let res = await this.$api.post('Action/Running', {
					ActType: '每周挑战'
				});
				this.action_list = res.data || [];
			},
			async del(ID) {
				let _this = this;
				let index = this.list.findIndex((item) => item.ID === ID)
				uni.showModal({
					title: '温馨提示',
					content: '您确定要删除这条动态吗?',
					confirmText: "删除",
					success: async function(res) {
						if (res.confirm) {
							let res = await _this.$api.post('/Community/Delete', {
								ID: ID
							});
							_this.list.splice(index, 1)
						} else if (res.cancel) {

						}
					}
				});
			},
			// 赞
			async zan(item) {
				this.zan_id = item.ID;

				let res = await this.$api.post('Community/ZAN', {
					ID: item.ID
				});
				if (JSON.stringify(res.data) != 'true') {
					this.$pv.msg(res.message);
					return;
				}

				this.list.forEach((item, index) => {
					if (item.ID == zid) {
						item.IsMyZAN = 1;
						item.CommunityZAN.push({
							UserID: uni.getStorageSync('user').UserID,
							HeadImgUrl: uni.getStorageSync('user')
								.HeadImgUrl
						})
						this.list.splice(index, 1, item);
					}
				})

			},


			async init() {
				this.PageIndex = 1;
				this.oldList = [];
				await this.getList();

				await this.$api.post('/Common/Add_ViewPath', {
					Path: 'dynameic',
					Platform: uni.getStorageSync('platform')
				});

				this.load = true;

				this.getAction();
			},
			async getList() {
				let res = await this.$api.post('Community/UserCommunity', {
					PageIndex: this.PageIndex,
					PageSize: this.PageSize,
					CompanyID: this.CompanyID,
					UserID: this.ID,
				});
				this.oldList = this.oldList.concat(res.data);
				this.list = JSON.parse(JSON.stringify(this.oldList));
				this.list.forEach((item) => {
					item.zanSum = item.CommunityZAN.length
					for (let i = 0; i < item.CommunityZAN.length; i++) {
						// item.CommunityZAN[i].sum=1
						for (let j = i + 1; j < item.CommunityZAN.length; j++) {
							if (item.CommunityZAN[i].UserID === item.CommunityZAN[j].UserID) {
								// item.CommunityZAN[i].sum++
								item.CommunityZAN.splice(j, 1)
								j--
							}
						}
					}
				})
				this.isMore = Array.isArray(res.data) && res.data.length >= this.PageSize;

				return true;
			},

			//下拉刷新
			async onRefresh() {
				this.PageIndex = 1;
				this.oldList = [];
				if (await this.getList()) {
					uni.$emit('triggered');
				}
			},

			//滚动到底部触发
			async scrolltolower() {
				if (this.isMore) {
					this.PageIndex++;
					this.getList();
				}

			},
			lookimg(url) {
				let arr = JSON.parse(url);
				uni.previewImage({
					urls: arr,
					current: 0
				})
			}
		},
		onLoad(args) {
			this.init();
			const user = uni.getStorageSync('user');
			this.ID = user.UserID
		},
		onShow() {
			this.user = uni.getStorageSync('user');
			this.init();
		},
		onShareAppMessage(e) { //发送给朋友
			// let trendsIndex = e.target.dataset.trendsIndex;
			let trendsId = e.target.dataset.id;
			let o = this.list.find(item => item.ID == trendsId);
			let pid = uni.getStorageSync('user').UserID;
			this.shareTitle = '动魅精彩瞬间，您不容错过';
			this.sharePath = `pages/tab/trends?pid=` + pid;
			this.shareImg = o.IsVideo == 1 ? JSON.parse(o.Images)[0] + '?x-oss-process=video/snapshot,t_1,m_fast,ar_auto' :
				JSON
				.parse(o.Images)[0]
			return {
				title: this.shareTitle,
				path: this.sharePath,
				imageUrl: this.shareImg
			}
		},
		sharePYQ() {
			const user = uni.getStorageSync("user");

			const pid = user.UserID;
			let id = this.sel_community.ID;
			let _title = this.sel_community.Content ? this.sel_community.Content : '发现精彩的魅友动态，赶快来围观吧'

			const BaseUrl = "http://h5.golf.xiaojusmart.com/#/";
			const paseUrl = `pages/H5/cm_detail?id=${id}&pid=${pid}`;
			let shareUrl = BaseUrl + paseUrl;

			uni.share({
				provider: "weixin",
				scene: "WXSceneTimeline",
				type: 0,
				href: shareUrl,
				title: '【动魅朋友圈】' + _title,
				imageUrl: JSON.parse(this.sel_community.Images)[0],
				success: (res) => {
					this.$refs.share.close()
				},
				fail(err) {
					console.log("fail:" + JSON.stringify(err));
				}
			});



		},
		shareWX() {
			const user = uni.getStorageSync("user");

			const pid = user.UserID;
			let id = this.sel_community.ID;
			let _title = this.sel_community.Content ? this.sel_community.Content : '发现精彩的魅友动态，赶快来围观吧'

			const BaseUrl = "http://h5.golf.xiaojusmart.com/#/";
			const paseUrl = `pages/H5/cm_detail?id=${id}&pid=${pid}`;
			let sharUrl = BaseUrl + paseUrl;
			let _this = this;
			uni.share({
				provider: "weixin",
				scene: "WXSceneSession",
				type: 5,
				imageUrl: JSON.parse(this.sel_community.Images)[0],
				title: '【动魅朋友圈】' + _title,
				miniProgram: {
					id: 'gh_ff1a33213d99',
					path: 'pages/dynamic/detail?id=' + id + '&pid=' + pid,
					type: 0,
					webUrl: sharUrl
				},
				success: (res) => {
					this.$refs.share.close()
				},
				fail(err) {
					console.log("fail:" + JSON.stringify(err));
				}
			});

			// this.is_app_share_show = false;
		}
	};
</script>

<style lang="scss">
page{
	background-color: #f6f6f6;
}
	.trends {
		    height: 100vh;
    		overflow: hidden;
		.week_share {
			display: flex;
			margin-top: 20rpx;
			padding-left: 32rpx;
			padding-right: 32rpx;
			border-radius: 16rpx;

			image {
				width: 100%;
				height: 150rpx;
			}

			.tit {
				height: 100rpx;
				border-bottom: 1px solid #404040;

				input {
					height: 100rpx;
					width: 100%;
					font-weight: 32rpx;
				}
			}

			.txt {
				min-height: 200rpx;
				height: 200rpx;

				/deep/ .u-textarea {
					background: none !important;
					padding-left: 0 !important;
					padding-right: 0 !important;
					border-bottom: none !important;
				}

				/deep/ .u-textarea__count {
					background: none !important;
					color: #fff !important;
				}

				/deep/ textarea {
					color: #fff !important;
				}

				/deep/ .textarea-placeholder {
					color: #a8a8a8 !important;
					;
				}
			}

			.act {
				line-height: 40rpx;
				color: #55aaff;
			}
		}

		.item {
			margin: 20rpx 0;
			padding-bottom: 10rpx;
			background: #fff;
			box-sizing: border-box;

			.zan {
				box-sizing: border-box;
				display: flex;
				//flex-direction: column;
				margin-top: 10rpx;
				padding: 0 30rpx;

				.zanlist {
					display: flex;
					margin-top: 10rpx;
					padding-left: 10rpx;

					.img {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}

					.name {
						font-size: 14px;
						margin-left: 14rpx;
					}
				}
			}

			.delete {
				padding: 10rpx 24rpx;
				box-sizing: border-box;
				padding-right: 50rpx;
				width: 100%;
				height: 60rpx;
				display: flex;
				justify-content: flex-end;
				margin-top: 10rpx;

				.delBtn {
					width: 120rpx;
					height: 60rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					text {
						line-height: 60rpx;
						text-align: center;
						font-size: 14px;
					}
					
					image{
						padding-top:32rpx;
						height: 48rpx;
						width: 48rpx;
						margin-left: 6rpx;
					}
				}
			}

			.item_hd {
				height: 100rpx;
				display: flex;
				// align-items: center;
				justify-content: space-between;
				padding-bottom: 20rpx;

				.left {
					width: 100%;
					height: 100rpx;
					display: flex;
					align-items: center;
				}

				.cover {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50rpx;
					border: 1px solid #7b7b7b;
					overflow: hidden;
					margin-right: 16rpx;
					image {
						height: 100%;
						width: 100%;
					}
				}
				.item_namebox{
						flex: 1;
						// display: flex;
						align-items: center;
						margin-bottom: 6rpx;
						.item_name {
							font-size: 32rpx;
							font-weight: 600;
							margin-right: auto;
						}
				}
			}

			.item_ft {
				display: flex;
				justify-content: space-between;
				height: 80rpx;
				align-items: right;

				.ft_btn {
					display: flex;
					align-items: center;
				}

				.icon_box {
					height: 48rpx;
					width: 48rpx;
					border-radius: 48rpx;
					background: rgba(255, 255, 255, 0.9);
					margin-right: 16rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						height: 32rpx;
						width: 32rpx;
					}
				}
			}

			.item_bd {
				.simg {
					// width: 750rpx;
					display: block;
					max-height: 750rpx;
				}
			}
		}
	}

	.add_btn {
		position: fixed;
		right: 32rpx;
		bottom: 70rpx;
		width: 96rpx;
		height: 96rpx;
		text-align: center;
		align-items: center;
		background-color: #0d0d0d;

		// box-shadow: 0px 4rpx 6rpx 0px rgba(106, 84, 53, 0.4);
		color: #fff;
		line-height: 96rpx;
		border-radius: 100rpx;
	}


	.x-share {
		background-color: #ffffff;
		width: 750rpx;
		border-radius: 20rpx;
		padding: 40rpx 20rpx 80rpx;
		display: flex;
		box-sizing: border-box;

		.item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			background-color: #ffffff;

			image {
				width: 64rpx;
				height: 64rpx;
				margin-bottom: 10rpx;
			}

			span {
				color: #2e2e2e;
			}
		}

	}

	.mt40 {
		margin-top: 40rpx;
	}

	.mt20 {
		margin-top: 20rpx;
		image{width: 100%;}
	}

	.video_box {
		height: 500rpx;

		video {
			width: 50%;
			height: 100%;
		}
	}

	.cover_list {
		margin-left: 30rpx;
		flex: 1;
		display: flex;

		.cover {
			margin-left: -8rpx;
			height: 40rpx;
			width: 40rpx;
			border: 1px solid #fff;
			border-radius: 50%;
			overflow: hidden;

			image {
				height: 100%;
				width: 100%;

			}
		}
	}


	.pop_con {
		height: 400rpx;
		background: #fff;
		border: 1px solid #FEF0BC;
		width: 650rpx;
		border-radius: 16rpx;

		.hd {
			height: 90rpx;
			line-height: 90rpx;
			border-bottom: 1px solid #eee;
			text-align: center;
			line-height: 90rpx;
			color: #333;
			font-weight: bolder;
		}

		.inp {
			margin-top: 30rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;

			.lab {
				font-size: 32rpx;
				color: #666;
			}

			input {
				margin-top: 10rpx;
				height: 80rpx;
				line-height: 80rpx;
				width: 100%;
				padding-left: 10rpx;
				box-sizing: border-box;
				border: 1px solid #eee;
				border-radius: 10rpx;
				color: #000;
			}
		}

		.btns {
			margin-top: 40rpx;
			display: flex;
			padding-left: 30rpx;
			padding-right: 30rpx;
			justify-content: space-between;

			/deep/ .u-button__text {
				color: #666;
			}

			/deep/ .u-button--success {
				text {
					color: #fff !important;
				}

				background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
			}

			/deep/ .u-button {
				width: 290rpx;
			}
		}
	}
button::after{
	border: 0;
}
</style>